<template>
    <el-drawer v-model="showDrawer" :title="title" :size="size" custom-class="customClass"
    :close-on-click-modal="closeOnClickModal" :destroy-on-close="destroyOnClose">
        <div class="mydrawer-container">
            <div class="body" v-loading="loading" element-loading-text="Loading...">
                <slot></slot>
            </div>
            <div class="actions">
                <el-button type="primary" class="mr-5" v-if="showSubmit" :loading="loading" @click="submit">
                    {{submitText}}
                </el-button>
                <el-button  @click="close" v-if="showCancel">
                    {{cancelText}}
                </el-button>
            </div>
        </div>
    </el-drawer>
</template>
<script setup>
import {ref} from 'vue'
// 定义属性
const props = defineProps({
  title: String,
  size: {
    type: String,
    default: '500'
  },
  customClass: {
    type: String,
    default: ''
  },
  // 是否可以点击Modal以外区域来关闭drawer
  closeOnClickModal: {
    type: Boolean,
    default: true
  },
  // 是否在关闭drawer时，注销掉drawer内的组件
  destroyOnClose: {
    type: Boolean,
    default: false
  },
  // 提交按钮文字
  submitText: {
    type: String,
    default: '提 交'
  },
  // 是否显示提交按钮
  showSubmit: {
    type: Boolean,
    default: true
  },
  // 取消按钮文字·
  cancelText: {
    type: String,
    default: '取 消'
  },
  // 是否显示取消按钮
  showCancel: {
    type: Boolean,
    default: true
  }
})

// 定义事件
const emit = defineEmits(["submit"])
const submit = (e) => {
    emit('submit', e)
}

// 控制抽屉是否显示
const showDrawer = ref(false)
// 打开抽屉
const open = () => showDrawer.value = true
// 关闭抽屉
const close = () => showDrawer.value = false

// 定义响应式的loading变量，用以控制登录按钮的loading显示
const loading = ref(false)
// 显示提交按钮loading
const showLoading = () => loading.value = true
// 隐藏提交按钮loading
const hideLoading = () => loading.value = false

defineExpose({open, close, showLoading, hideLoading})
</script>
<style scoped>
.mydrawer-container {
    @apply  flex flex-col;
    height: 100%;
}

.mydrawer-container .body {
    @apply flex-1 overflow-y-auto;
}
.mydrawer-container .actions {
    @apply pt-5 flex items-center justify-start;
    height: 60px;
}
</style>